<!--用户中心的下拉栏-->
<!--parent:statusBar-->
<script setup lang="ts">
import {ref, watch} from 'vue'
import {appOptionsConfigType} from "@/types/component/core";
//定义区
const props = withDefaults(
    defineProps<{
      option: appOptionsConfigType | null,
      activeOption: string | null
    }>(),
    {
      option: null,
      activeOption: null
    }
);
const emit = defineEmits(['close'])
watch(() => props.activeOption, (newVal) => {
  if (props.option && newVal === props.option.name) {
    showOptionsMenu()
  } else {
    hideOptionsMenu()
  }
  if (!newVal) {
    hideOptionsMenu()
  }
})
//OptionsMenu的隐藏和展示

//样式
const opacity = ref<number>(0)
const display = ref<string>('none')
//隐藏
const hideOptionsMenu = () => {
  opacity.value = 0
  setTimeout(() => {
    display.value = 'none'
  }, 300)
}
//显示
const showOptionsMenu = () => {
  //消除掉显示在表层的提醒
  display.value = 'block'
  setTimeout(() => {
    opacity.value = 1
  }, 20)
}

//选中后
const selected = (select) => {
  select.handler()
  hideOptionsMenu()
  emit('close')
}
</script>
<template>
  <div class="user-center" ref="OptionsMenuRef" :style="{opacity:opacity,display:display}">
    <div class="user-center-container">
      <template v-if="option" v-for="(select,idx) in option.selects">
        <div class="user-select-item" @click.stop="selected(select)">
          <div class="text">
            {{ select.title }}
          </div>
        </div>
        <div class="divider-container" v-if="idx+1!==option.selects.length">
          <a-divider class="divider"/>
        </div>
      </template>
    </div>
  </div>
</template>
<style lang="less" scoped>
.user-center {
  position: absolute;
  //height: 200px;
  width: 100px;
  left: 50%;
  transform: translateX(-50%);
  top: 40px;
  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(15px);
  //background-color: #A8A9AB;
  border-radius: 10px;
  transition-property: opacity;
  transition: 0.3s;
  padding: 8px;

  .user-center-container {
    height: 100%;

    .user-select-item {
      height: 30px;
      border-radius: 10px;
      color: #4D4B4F;

      .text {
        text-align: center;
        line-height: 30px;
        font-weight: 500;
        font-size: 14px;
      }
    }

    .user-select-item:hover {
      color: #1B1A1F;
    }

    .user-select-item:active {
      color: #4D4B4F;
    }

    .divider-container {
      width: 80%;
      margin: 0 auto;

      .divider {
        margin: 8px 0;
        padding: 0;
      }
    }


  }
}
</style>
